<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 200px;height:200px;background-color: royalblue;}
        .box:nth-child(1){padding:20px;box-sizing: border-box;}
        .box:nth-child(2){margin:20px;}
    </style>
</head>
<body>
    <!-- 
    1.盒子模型  -  
    box-sizing:content-box
    实际宽度  = width + padding-left/right + border-left/right
    实际高度  = height + padding-top/bottom + border-top/bottom

    100% / 4  = 25% padding + border

    box-sizing:border-box
    实际宽度  = width（padding+border已经算过了）
    实际高度  = height

    width
    height
    padding
    border
    margin

    1.width/height 自适应100% => 全屏 (父容器/body/html 高度height:100%)
    2.padding内填充 - 等分布局 100% / 等分 + 间距 （% - px）  box-sizing:border-box
    3.margin:外间距 - margin负值技巧: 1.反向移动  2.等高布局  3.圣杯/双飞翼
    4.border - 三角形
     -->

     <div class="box"></div>
     <div class="box"></div>
</body>
</html>